<template>
  <el-table-column
    :label="columnOption.label"
    :prop="columnOption.prop"
    :width="columnOption.columnWidth"
    :min-width="columnOption.columnMinWidth ? columnOption.columnMinWidth : 200"
    :fixed="columnOption.fixed == '-' ? undefined : columnOption.fixed"
    :show-overflow-tooltip="columnOption.showTooltip"
    align="center"
  >
    <template v-for="(item, index) in columnOption.children" :key="index">
      <anvil-table-column
        v-if="item.children && item.children.length"
        :children="children"
        :columnSettingObject="item"
        :handleEditColumn="handleEditColumn"
        :getColumnParams="getColumnParams"
        :formData="formData"
      >
      </anvil-table-column>
      <el-table-column
        v-else-if="item.display"
        :label="item.label"
        :prop="item.prop"
        :width="item.columnWidth"
        :min-width="item.columnMinWidth ? item.columnMinWidth : 200"
        :fixed="item.fixed == '-' ? undefined : item.fixed"
        :show-overflow-tooltip="item.showTooltip"
        align="center"
      >
        <template #header="scope" v-if="item.columnEditable">
          <span>{{ scope.column.label }}</span>
          <el-button style="margin-left: 8px" icon="el-icon-edit" link @click="() => handleEditColumn(item, scope.$index)" />
        </template>
        <template #default="scope">
          <div :class="item.classNames ? item.classNames.join(' ') : ''">
            <custom-comp-item v-if="isProvideFormData(item.type)" v-model="scope.row[item.prop]" :item="item" :params="getTableColumnParams(item, scope)" :formData="formData" />
            <custom-comp-item v-model="scope.row[item.prop]" :item="item" :params="getTableColumnParams(item, scope)" />
          </div>
        </template>
      </el-table-column>
    </template>
  </el-table-column>
</template>

<script>
import { cloneDeep } from 'lodash-es';
import customCompItem from '../../views/form-render/customCompItem.vue';
import { provideFormData } from '../../utils/specialCompTypes';
// anvil多级表头组件
export default {
  name: 'AnvilTableColumn',
  components: { customCompItem },
  inheritAttrs: false,
  props: {
    children: {
      type: Array,
      default: () => []
    },
    columnSettingObject: {
      type: Object,
      default: () => {}
    },
    // 表单对象
    formData: {
      type: Object,
      default: () => {}
    },
    handleEditColumn: {
      type: Function,
      default: undefined
    },
    getColumnParams: {
      type: Function,
      default: undefined
    }
  },
  data() {
    return {
      columnOption: {}
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.columnOption = cloneDeep(this.columnSettingObject);
      // this.generatecolumnOption(this.columnOption);
    },
    // 根据组件类型判断是否提供formdata参数
    isProvideFormData(type) {
      const types = provideFormData;
      return types.indexOf(type) > -1;
    },
    generatecolumnOption(obj) {
      const { label, children, prop } = obj;
      if (prop) {
        const comp = this.children.find((item) => item.prop == prop);
        if (comp) {
          for (let key in comp) {
            obj[key] = comp[key];
          }
        }
      }
      if (children) {
        children.map((item) => {
          this.generatecolumnOption(item);
        });
      }
    },
    getTableColumnParams(column, scope) {
      return this.getColumnParams(column, scope);
    }
  }
};
</script>